I have a Bootstrap 4 carousel and I have given this attribute data-keyboard="true"

However the keyboard navigation does not work. Not even when focusing on the carousel itself with the mouse first.

I would like the carousel to work with keyboard directly on page load.

This is my code

<?php if( have_rows('photos') ): ?>
    <div class="carousel_bg">
        <div class="container">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-keyboard="true">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <?php
                    $active = 'active';
                    $num = 0;
                    while ( have_rows('photos') ) : the_row();
                    $photo = get_sub_field('photo');
                    if($photo == "" ) continue;
                        ?>
                        <li data-target="#carousel-example-generic" data-slide-to="<?php echo $num ?>" class="<?php echo $active ?>"></li>
                        <?php
                        $active = '';
                        $num += 1;
                    endwhile; ?>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <?php
                    $active = 'active';
                    while ( have_rows('photos') ) : the_row();
                    $photo = get_sub_field('photo');
                    if($photo == "" ) continue;
                        ?>
                        <div class="carousel-item <?php echo $active ?> screen08">
                            <div class="container">
                                <img src="<?php echo get_template_directory_uri(); ?>/files/photos/<?php the_sub_field('photo'); ?>" class="img-fluid is-slider-item" />
                            </div>
                        </div><!-- /item -->
                        <?php $active = '';
                    endwhile;
                    ?>
                </div>
            </div>
        </div>
    </div><!-- /row -->
<?php endif; ?>

Bootstrap 4 js library is loaded properly ...

Any hint?

Thanks in advance!